/*
 * @Author: xiongpj
 * @Email: xiongpeiji@innjoy.me
 * @Date: 2020-10-09 11:14:24
 * @Last Modified by: xiongpj
 * @Last Modified time: 2020-10-09 18:03:58
 * @Description: 资产状态占比图表组件
 */
//  耗材使用成本对比
<template>
  <div class="zichanzhuangtaizhanbi">
    <div class="top-tools">
      <h3>{{text}}</h3>
      <div class="select-school">
        <span class="select-span">
          <el-select v-model="year" placeholder="请选择" @change="changeYaerVal">
            <el-option
              v-for="item in yearList"
              :key="item.code"
              :label="item.label"
              :value="item.code"
            ></el-option>
          </el-select>
        </span>

        <span class="select-span">
          <el-select v-model="value" placeholder="请选择" @change="changeDataVal">
            <el-option
              v-for="item in CompanyList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </span>
      </div>
    </div>
    <div class="chart-box">
      <div id="bmhcdb" v-if="!noData"></div>
      <div class="noData" v-show="noData"><span class="targetBox"></span>暂无数据</div>
    </div>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import $api from "@/axios/apiConfig"; //接口
import axios from "@/axios"; //请求
export default {
  props: {
    text: String
  },
  data() {
    return {
      value: "01",
      year: "",
      dataIndex: 0,
      CompanyList: [], //公司列表
      AssetStatPercent: [],
      yearList: [
        { label: "2016", code: "2016" },
        { label: "2017", code: "2017" },
        { label: "2018", code: "2018" },
        { label: "2019", code: "2019" },
      ],
      chart: null,
      noData:false
    };
  },
  mounted() {
    this.getAssetStatPercent();
  },
  methods: {
    //获取公司列表
    getCompanyList() {
      axios
        .get($api.api + "/smart-uttc/assetManage/getCompanyList")
        .then(res => {
          if (res) {
            this.CompanyList = res.data;
          }
        });
    },
    changeDataVal(val) {
      this.value = val;
      this.changeData();
    },
    changeYaerVal(val) {
      this.year = val;
      this.changeData();
    },
    //获取耗材使用成本
    getAssetStatPercent() {
      let url = "?companyCodes=" + this.value + "&year=" + this.year;
      axios
        .get(
          $api.api +
            "/smart-uttc/assetManage/getConsumablesCostComparison" +
            url
        )
        .then(res => {
          if (res) {
            if (res.data.amountList && res.data.amountList.length > 0) {
              this.AssetStatPercent = res.data.amountList;
            }else{
                this.noData = true
            }
            this.chartRender();
          }
        });
    },
    changeData(){
         let url = "?companyCodes=" + this.value + "&year=" + this.year;
      axios
        .get(
          $api.api +
            "/smart-uttc/assetManage/getConsumablesCostComparison" +
            url
        ).then(res=>{
            if(res.data.amountList && res.data.amountList.length > 0){
                this.AssetStatPercent = res.data.amountList;
                this.chart.changeData(this.AssetStatPercent);
            }else{
                this.noData = true
            }
        })
    },
    chartRender() {
      const chart = new Chart({
        container: "bmhcdb",
        autoFit: true,
        height: 300,
        padding: [0, 50, 20, 70] // 上，右，下，左
      });
      chart.data(this.AssetStatPercent);
      chart.scale("percentage", {
        formatter: val => {
          val = val + "%";
          return val;
        }
      });
      chart.axis("value", {
        label: {
          style: {
            fill: "#fff"
          }
        }
      });
      chart.tooltip({
        showTitle: false,
        showMarkers: false
      });
      chart.legend(false);
      chart
        .line()
        .position("key*value")
        .color("type", ["#FF5DE4"]);
      chart
        .area()
        .position("key*value")
        .color("type", ["#FF5DE4"]);
      chart.render();
      this.chart = chart;
    }
  },
  mounted() {
    this.getCompanyList();
    this.getAssetStatPercent();
    let date = new Date();
    let nowyear = date.getFullYear();
    let lastyaer = Number(this.yearList[this.yearList.length - 1].label);
    if (lastyaer < nowyear) {
      this.year = nowyear;
      this.yearList.push({
        label: nowyear.toString(),
        code: nowyear.toString()
      });
    }
  }
};
</script>

<style scoped lang="scss">
.zichanzhuangtaizhanbi {
  padding: 10px;
  .top-tools {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 16px;
      height: 16px;
      line-height: 16px;
      padding-left: 10px;
      border-left: 4px solid #00ffee;
    }
    .select-school {
      span {
        cursor: pointer;
        color: rgba(255, 255, 255, 0.6);
      }
      .line {
        color: #2a55ff;
        margin: 0px 10px;
      }
      .active {
        color: #00ffee;
      }
      .select-span {
        margin-left: 20px;
      }
    }
  }
  .chart-box {
    margin-top: 20px;
  }
  //   暂无数据展示
  .noData{
      margin-top: 20px;
      display: flex;
      align-items: center;
      .targetBox{
          display: block;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: #00FFEE;
          margin-right: 20px;
      }
  }
}
</style>
<style>
.el-input__inner {
  width: 144px;
  height: 34px;
  border-color: #2a55ff;
  background: #2a55ff;
  color: #fff;
}
</style>